<template>
  <div class="my-outbox">
    <div ref="box" class="my-inbox">
      <div v-for="(item,index) in sendVal" :key="index" ref="list" class="my-list" :style="note">
        <!--{{item.name}}刚刚购买了产品-->
        <span class="my-uname">{{ item.content }}:{{ item.mainBody }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { listPage } from '@/api/system/message'
export default {
  name: 'MyMarqueeLeft',
  data() {
    return {
      isShow: false,
      sendVal: [],
      note: {
        // backgroundImage: 'url(' + require('../../../static/images/common/msg.png') + ')',
        backgroundSize: '20px 20px',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: '1% 50%'
      },
      // 定时器标识
      nowTime: null,
      // 每一个内容的宽度
      disArr: []
    }
  },
  mounted() {
    console.log(this.sendsVal)
    // this.sendVal = this.sendsVal[0]
    setTimeout(() => {
      var item = this.$refs.list
      var len = this.sendVal.length
      var arr = []
      // 因为设置的margin值一样，所以取第一个就行。
      for (var i = 0; i < len; i++) {
        arr.push(item[i].clientWidth) // 把宽度和 margin 加起来就是每一个元素需要移动的距离
      }
      this.disArr = arr
      this.moveLeft()
    }, 1000)
  },
  created() {
    this.listPages()
  },
  beforeDestroy() {
    // 页面关闭清除定时器
    clearInterval(this.nowTime)
    // 清除定时器标识
    this.nowTime = null
  },
  methods: {
    listPages() {
      listPage({ type: 2, userId: this.$store.state.user.userId }).then(res => {
        this.sendVal = [res.data.dataTable.data[0]]
      })
    },
    // 获取margin属性
    getMargin(obj) {
      var marg = window.getComputedStyle(obj, null)['margin-right']
      marg = marg.replace('px', '')
      return Number(marg) // 强制转化成数字
    },
    // 移动的方法
    moveLeft() {
      var that = this
      var outbox = this.$refs.box
      // 初始位置
      var startDis = 800
      this.nowTime = setInterval(function() {
        startDis -= 0.5
        if (Math.abs(startDis) > Math.abs(that.disArr[0])) {
          that.disArr.push(that.disArr.shift())
          that.sendVal.push(that.sendVal.shift())
        } else if (startDis == -Math.abs(that.disArr[0])) {
          startDis = 800
          that.listPages()
        }

        outbox.style = `transform: translateX(${startDis}px)`
      }, 1000 / 100)
    }
  }
}
</script>

<style lang="less" scoped>
.my-outbox{
/*color: #D7BC8D;*/
overflow: hidden;
 color: #FFFFFF;
 height: 35px;
 /*background: #422b02;*/
 .my-inbox{
  white-space: nowrap;
  transform: translateX(800px);
  .my-list{
   margin-right: 100px;
   display: inline-block;
   font-size: 16px;
   // height: 20px;
   text-indent:30px;
   line-height: 40px;
   .my-uname{
    /*color: #FF8900;*/
    color: black;
   }
  }
 }
}
</style>
